import React, { useState } from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import { Layout, Menu, Button, Avatar, Dropdown } from 'antd';
import { MenuUnfoldOutlined, MenuFoldOutlined, UserOutlined, LogoutOutlined, HomeOutlined, SettingOutlined, UserAddOutlined, FileTextOutlined } from '@ant-design/icons';

const { Header, Sider, Content } = Layout;

const Main = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();

  const toggle = () => {
    setCollapsed(!collapsed);
  };

  const handleLogout = () => {
    // 这里可以添加登出逻辑
    navigate('/login');
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider trigger={null} collapsible collapsed={collapsed} theme="light">
        <div className="logo" style={{ height: '32px', margin: '16px', background: 'rgba(0, 120, 250, 0.1)', borderRadius: '6px', textAlign: 'center', lineHeight: '32px', color: '#1890ff' }}>
          {collapsed ? '后台' : '管理后台'}
        </div>

        <Menu theme="light" mode="inline" defaultSelectedKeys={['1']}
          items={[
            {
              key: '1',
              icon: <HomeOutlined />,
              label: '首页',
              onClick: () => navigate('/'),
            },
            {
              key: '2',
              icon: <UserAddOutlined />,
              label: '用户管理',
              onClick: () => navigate('/users'),
            },
            {
              key: '3',
              icon: <FileTextOutlined />,
              label: '物品管理',
              onClick: () => navigate('/items'),
            },
            {
              key: '4',
              icon: <SettingOutlined />,
              label: '系统设置',
              onClick: () => navigate('/settings'),
            },
          ]}
        />
      </Sider>

      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0, display: 'flex', justifyContent: 'space-between', alignItems: 'center', backgroundColor: '#f0f2f5' }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={toggle}
            style={{ fontSize: '16px', width: 64, height: 64, color: '#1890ff' }}
          />
          <div style={{ display: 'flex', alignItems: 'center', paddingRight: '24px' }}>
            <Dropdown menu={{
              items: [
                { key: 'profile', icon: <UserOutlined />, label: '个人资料' },
                { key: 'logout', icon: <LogoutOutlined />, label: '退出登录', onClick: handleLogout }
              ]
            }} placement="bottomRight" trigger={['hover']}>
              <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
                <Avatar icon={<UserOutlined />} style={{ marginRight: '8px' }} />
                <span style={{ color: '#333' }}>管理员</span>
              </div>
            </Dropdown>
          </div>
        </Header>
        <Content
          style={{ margin: '24px 16px', padding: 24, minHeight: 280, borderRadius: '8px', backgroundColor: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)' }}
        >
          <div>
            <Outlet />
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default Main;